<template>
  <div class="WebglPointsDiv">

  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: "WebglPoints2.vue",
  methods: {
    init: function () {

      let doc = document.getElementsByClassName('WebglPointsDiv')[0];
      let camera = new THREE.PerspectiveCamera(45, doc.clientWidth / doc.clientWidth, 0.2, 1000);
      camera.position.z = 1000;

      let scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2(0x000000, 0.001);

      const gemetry = new THREE.BufferGeometry();
      let verties = [];
      const sprite = new THREE.TextureLoader().load('disc.png');

      for (let i = 0; i < 10000; i++) {
        const x = 2000 * Math.random() - 1000;
        const y = 2000 * Math.random() - 1000;
        const z = 2000 * Math.random() - 1000;

        verties.push(x, y, z);
      }
      gemetry.setAttribute('position', new THREE.Float32Attribute(verties, 3));

      let material = new THREE.PointsMaterial({size: 35, sizeAttenuation: true, map: sprite, alphaTest: 0.5, transparent: true});
      material.color.setHSL(1.0, 0.3, 0.7);

      const particles = new THREE.Points(gemetry, material);
      scene.add(particles);

      let renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(doc.clientWidth, doc.clientHeight);


      doc.appendChild(renderer.domElement);

      doc.addEventListener( 'pointermove', onPointerMove );

      let mouseX = 0, mouseY = 0;

      let windowHalfX = window.innerWidth / 2;
      let windowHalfY = window.innerHeight / 2;

      function onPointerMove( event ) {

        if ( event.isPrimary === false ) return;

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;

      }

      let animate = function () {
        requestAnimationFrame(animate);
        camera.position.x += ( mouseX - camera.position.x ) * 0.05;
        camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
        camera.lookAt(scene.position);
        renderer.render(scene, camera);
      }
      animate();
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
.WebglPointsDiv {
  height: 100%;
}
</style>